<template>
	<div class="swiperbox">
		<swiper :slides-per-view="1" :effect="'fade'" :loop="true" :pagination="{ clickable: true }" :navigation="true"
			:modules="modules" class="mySwiper">
			<swiper-slide><img src="../../assets/imgs/home/banner.jpg" /></swiper-slide>
			<swiper-slide><img src="../../assets/imgs/home/banner2.jpg" /></swiper-slide>
		</swiper>
	</div>
</template>

<script setup>
	import {
		Swiper,
		SwiperSlide
	} from 'swiper/vue';
	import {
		Autoplay,
		EffectFade,
		Pagination,
		Navigation
	} from 'swiper/modules';
	import 'swiper/css';
	import 'swiper/css/effect-fade';
	import 'swiper/css/navigation';
	import 'swiper/css/pagination';

	const modules = [Autoplay, EffectFade, Pagination, Navigation];
</script>

<style lang="less">
	/* 这里可以添加自定义样式 */
	.swiperbox {
		width: 100%;
		height: 100%;
		/* 根据需要调整高度 */
		overflow: hidden;

		.swiper {
			width: 100%;
			height: 100%;
			--swiper-navigation-color: #fff;
			--swiper-pagination-color: #fff;
		}

		.swiper-horizontal>.swiper-pagination-bullets,
		.swiper-pagination-bullets.swiper-pagination-horizontal {
			top: 560px !important;
		}

		.swiper-slide {
			background: #fff;
			/* Center slide text vertically */
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.swiper-slide img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
</style>